<template>
	<view class="meInfo">
		<view style="padding-top: 25rpx">
			<view class="meInfoUser">
				<up-cell title="头像" :isLink="true" size="large" @click="handlerCell('avater')">
					<template #value>
						<view class="">
							<up-avatar :src="userStore.getUserInfo().avatar" fontSize="18" size="26"></up-avatar>
						</view>


					</template>
				</up-cell>
				<up-cell title="姓名" :isLink="true" size="large" :border="true" @click="handlerCell('name')">
					<template #value>
						<text class="u-slot-value">{{ userName }}</text>
					</template>
				</up-cell>
				<up-cell title="手机号" size="large" :border="false">
					<template #value>
						<text class="u-slot-value">{{ userStore.getUserInfo().phonenumber }}</text>
					</template>
				</up-cell>
			</view>
		</view>
	</view>
	<up-popup :show="modalShow" mode="center" @close="modalShow = false" :round="10">
		<view class="custom-modal">
			<view class="modal-header">
				<text class="modal-title">{{ title }}</text>
			</view>
			<view class="modal-content">
				<up-form labelPosition="left" :model="userForm" :rules="rules" ref="formRef" labelWidth="auto">
					<up-form-item label="用户名" prop="userName">
						<up-input v-model="userForm.userName" placeholder="请输入用户名"></up-input>
					</up-form-item>
				</up-form>
			</view>
			<up-divider></up-divider>
			<view class="modal-footer">
				<up-button @click="modalShow = false" plain size="small">取消</up-button>
				<up-button @click="handleConfirm" type="primary" size="small">确定</up-button>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useUserStore
	} from "@/store/user";

	const userStore = useUserStore();
	const userName = ref("");
	const modalShow = ref(false);
	const title = ref("");
	const userForm = ref({
		userName: "普通用户",
	});
	const formRef = ref(null);
	const rules = {
		userName: [{
			type: "string",
			required: true,
			message: "请填写用户名",
			trigger: ["blur", "change"],
		}, ],
	};

	onLoad(() => {
		userName.value = userStore.getUserInfo().nickname;

	});
	const handlerCell = (val) => {
		if (val == "avater") {
			uni.navigateTo({
				url: "/Me/uploadAvater/uploadAvater",
			});
		}
		if (val == "name") {
			title.value = "修改用户名";
			userForm.value.userName = userName.value;
			modalShow.value = true;
		}
	};

	const handleConfirm = () => {
		// 表单验证逻辑
		let data = {
			userName: userForm.value.userName,
		};
		formRef.value
			?.validate()
			.then((res) => {
				uni.$u.http.post("/wechat/editUserName", data).then((res) => {
					if (res.success) {
						uni.showToast({
							title: "修改成功",
							icon: "success",
						});
						userName.value = userForm.value.userName;
						userStore.setUserName(userName.value)
						// uni.$emit("changeName", userName.value);
					} else {
						uni.showToast({
							title: "修改用户名失败",
							icon: "fail",
						});
					}
				});
				modalShow.value = false;
			})
			.catch((err) => {
				console.log("验证失败", err);
			});
	};
</script>

<style scoped lang="scss">
	.meInfo {
		background: #f8f8f8;
		height: 100vh;

		.meInfoUser {
			width: 90vw;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10rpx;
		}
	}

	.custom-modal {
		padding: 30rpx 0;

		.modal-header {
			text-align: center;
		}

		.modal-content {
			padding: 0 25rpx;
		}

		.modal-footer {
			width: 80%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			:deep(.u-button) {
				width: 25%;
			}
		}
	}
</style>